import * as echarts from "echarts";
import { useEffect, useRef, useState } from "react";
import styles from "../../assets/css/PatientData/DrugConsumption.module.css";
import { selectDrugConsumptionStatisticsList } from "../../api/PatientData/DrugConsumption";
export default function DrugConsumption() {
  // 水波图
  const [nowDrug, setNowDrug] = useState("");
  const charLiquidFillRef = useRef(null);
  // 饼状图
  const [pastDrug, setPastDrug] = useState([]);
  const charPieRef = useRef(null);
  // 柱状图
  const [pillar, setPillar] = useState({});
  const charShadowRef = useRef(null);

  useEffect(() => {
    selectDrugConsumptionStatisticsList()
      .then((res) => {
        const r = res.data.drugsdatas;
        setNowDrug(r.cursurplus);
        setPastDrug(r.yesterdayChart);
        setPillar(r.weekChart);
        console.log(r);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  useEffect(() => {
    if (pastDrug && pillar && nowDrug) {
      // 饼状图
      const pieChart = echarts.init(charPieRef.current);
      pieChart.setOption({
        title: {
          text: "昨日药材消耗占比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 10,
          show: false,
          left: "center",
          data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
        },
        series: [
          {
            type: "pie",
            radius: "80%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: pastDrug,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      // 柱状图
      const shadowChart = echarts.init(charShadowRef.current);
      shadowChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: pillar.type,
        },
        series: pillar.data.map((item) => ({
          name: item.name,
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: item.data,
        })),
      });
      // 水波图
      const liquidFillChart = echarts.init(charLiquidFillRef.current);
      liquidFillChart.setOption({
        series: [
          {
            type: "liquidFill",
            radius: "70%",
            data: [nowDrug, 0.45, 0.4, 0.3],
            label: {
              normal: {
                textStyle: {
                  color: "black",
                  fontSize: 50,
                },
              },
            },
          },
        ],
      });
    }
    return () => {
      // 柱状图
      if (charShadowRef.current) echarts.dispose(charShadowRef.current);
      // 饼状图
      if (charPieRef.current) echarts.dispose(charPieRef.current);
      // 水波图
      if (charLiquidFillRef.current) echarts.dispose(charLiquidFillRef.current);
    };
  }, [pastDrug, pillar, nowDrug]);
  return (
    <div className={styles.bigBox}>
      <div className={styles.left}>
        <p className={styles.title}>今日药材消耗库存</p>
        <div ref={charLiquidFillRef} className={styles.liquidFill}></div>
        <div ref={charPieRef} className={styles.pie}></div>
      </div>
      <div className={styles.right}>
        <div ref={charShadowRef} className={styles.shadow}></div>
      </div>
    </div>
  );
}
